/* 
1 点击 “+” 触发tap点击事件
  1 调用小程序内置的 选择图片的 api（chooseMedia） https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
  2 获取到 图片的路径 ，因为有多个图片，所以是个数组
  3 把图片路径 存到 data的变量中
  4 页面就可以根据 图片数组 进行循环显示 自定义组件
2 点击 自定义图片 组件（点击叉号删除元素）
  1 获取被点击的元素的索引
  2 获取 data中的图片数组
  3 根据索引 数组中删除对应的元素
  4 把数组重新设置回data中
3 点击 “提交”
  1 获取文本域的内容 类似 输入框的获取
    1 data中定义变量 表示 输入框内容
    2 文本域 绑定 输入事件 事件触发的时候 把输入框的值 存入到变量中 
  2 对这些内容 合法性验证
  3 验证通过 用户选择的图片 上传到专门的图片的服务器 返回图片外网的链接
    1 遍历图片数组 
    2 挨个上传
    3 自己再维护图片数组 存放 图片上传后的外网的链接
  4 文本域 和 外网的图片的路径 一起提交到服务器 前端的模拟 不会发送请求到后台。。。 
  5 清空当前页面
  6 返回上一页 
 */

Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs: [
      {
        id: 0,
        value: "体验问题",
        isActive: true
      },
      {
        id: 1,
        value: "商品、商家投诉",
        isActive: false
      }
    ],
    // 选择的图片数组
    chooseImgs: [],
    // 文本域的内容
    textVal: ""
  },
  // 外网的图片的路径数组（临时数组）
  UpLoadImgs: [],
  // 标题点击事件，从子组件传递过来
  handleTabsItemChange(e) {
    // 1 获取被点击的标题索引
    const { index } = e.detail;
    // console.log(index);
    // 修改原数组
    let { tabs } = this.data;
    tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
    // 赋值到data中
    this.setData({
      tabs
    });
  },
  // 点击 “+” 选中图片
  handleChooseImg() {
    // 调用小程序内置的选择图片api(chooseMedia)
    wx.chooseMedia({
      // 可以同时选中的最大图片数量
      count: 9,
      // 可以上传的文件类型：图片或视频
      mediaType: ['image', 'video'],
      // 图片和视频选择的来源: 相册或照相机
      sourceType: ['album', 'camera'],
      // 拍摄视频最长拍摄时间，单位秒。时间范围为 3s 至 60s 之间。不限制相册。
      maxDuration: 30,
      // 仅在 sourceType 为 camera 时生效，使用前置或后置摄像头
      // back	使用后置摄像头;  front	使用前置摄像头
      camera: 'back',
      success: (res) => {
        // console.log(res);
        // 获取上传的图片路径数组，每个数组元素是一个图片对象
        let imgList = res.tempFiles;
        // 每个数组元素是一个图片对象,需要把每个对象的图片路径拿出来
        let ImgPathList = imgList.map(v => v.tempFilePath);
        // console.log(ImgPathList);
        // 图片数组，可以继续上传，在原来上传的基础上进行拼接
        this.setData({
          chooseImgs: [...this.data.chooseImgs, ...ImgPathList]
        });
      }
    });
    // // 调用小程序内置的选择图片api(chooseImage)
    // wx.chooseImage({
    //   // 可以同时选中的最大图片数量
    //   count: 9,
    //   // 图片的格式：原图或压缩
    //   sizeType: ['original', 'compressed'],
    //   // 图片的来源：相册或照相机
    //   sourceType: ['album', 'camera'],
    //   success: (result) => {
    //     // console.log(result);
    //     // 图片数组，可以继续上传，在原来上传的基础上进行拼接
    //     this.setData({
    //       chooseImgs: [...this.data.chooseImgs,...result.tempFilePaths]
    //     });
    //   }
    // });

  },
  // 点击自定义组件 删除图片
  handleRemoveImg(e) {
    // console.log(e);
    // 获取被点击组件的index索引
    const { index } = e.currentTarget.dataset;
    // 获取data中图片的数组
    let { chooseImgs } = this.data;
    // 删除元素
    chooseImgs.splice(index, 1);
    // 更新data中的数组
    this.setData({
      chooseImgs
    });
  },
  // 文本域的输入事件
  handleTextInput(e) {
    // console.log(e);
    this.setData({
      textVal: e.detail.value
    })
  },
  // 提交按钮的点击事件
  handleFormSubmit() {
    // 1 获取文本域的内容、图片数组
    const { textVal, chooseImgs } = this.data;
    // 2 合法性的验证
    // textVal.trim()去除两边的空格
    if (!textVal.trim()) {
      // 不合法
      wx.showToast({
        title: '输入不合法',
        icon: 'none',
        // 防止用户反复点击
        mask: true
      });
      return;
    }
    // 3 准备上传图片到专门的图片服务器
    // 上传文件的api不支持多个文件同时上传，所以需要遍历数组逐个上传
    // 显示正在上传过程中的等待图标
    wx.showLoading({
      title: "正在上传中",
      mask: true
    });

    // 判断有没有需要上传的图片数组
    if(chooseImgs.length!=0){
      chooseImgs.forEach((v, i) => {
        wx.uploadFile({
          // 图片要上传的哪里
          url: 'https://www.superbed.cn/',
          // 被上传的文件的路径
          filePath: v,
          // 上传的文件的名称，后台根据此名称来获取文件，在此自定义名称为file
          name: "file",
          // 超时时间，单位为毫秒
          // timeout: 60000,
          // 顺带的文本信息
          formData: {},
          success: (result) => {
            // console.log(result);

            // 若result.data是个json字符串，则需要使用JSON.parse()进行解析
            // 原
            // let url = JSON.parse(result.data).data.url;
            // 改
            // let url = JSON.parse(result.data).data.msg;
            let url = result.data.msg;

            this.UpLoadImgs.push(url);
            // 所有的图片都上传完毕了才触发  
            if (i === chooseImgs.length - 1) {
              // 关闭正在上传过程中的等待图标
              wx.hideLoading();
              
              console.log("把文本的内容和外网的图片数组 提交到后台中");
              //  提交都成功了
              // 重置页面
              this.setData({
                textVal: "",
                chooseImgs: []
              });
              // 返回上一级页面
              wx.navigateBack({
                delta: 1
              });
            }
          }
        });
        // wx.uploadFile({
        //   url: 'https://img.coolcr.cn/api/upload',
        //   filePath: v,
        //   name: "image",
        //   formData: {},
        //   success: (result) => {
        //     console.log(result);
        //     let url = JSON.parse(result.data).data.url;
        //     this.UpLoadImgs.push(url);
        //     if (i === chooseImgs.length - 1) {
        //       wx.hideLoading();
        //       console.log("把文本的内容和外网的图片数组 提交到后台中");
        //       this.setData({
        //         textVal: "",
        //         chooseImgs: []
        //       })
        //       wx.navigateBack({
        //         delta: 1
        //       });
        //     }
        //   });
      });
    }
    else{
      // 关闭正在上传过程中的等待图标
      wx.hideLoading();
      console.log("只是提交了文本");
      // 返回上一级页面
      wx.navigateBack({
        delta: 1
      });
    }
    


  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})